<template>
  <div class="app-container">
    <div class="block">
      <el-button
        type="success"
        size="mini"
        icon="el-icon-plus"
        @click.native="add"
        >添加</el-button
      >
      <el-button
        type="danger"
        size="mini"
        icon="el-icon-delete"
        @click.native="remove"
        >删除</el-button
      >
    </div>
    <tree-table
      :data="data"
      :expandAll="expandAll"
      highlight-current-row
      border
    >
      <el-table-column label="简称">
        <template slot-scope="scope">
          <el-button type="text" @click="editItem(scope.row)">{{
            scope.row.simplename
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="全称">
        <template slot-scope="scope">
          <span>{{ scope.row.fullname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="顺序">
        <template slot-scope="scope">
          <span>{{ scope.row.num }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            icon="el-icon-edit"
            @click.native="editItem(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="mini"
            icon="el-icon-delete"
            @click="removeItem(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </tree-table>

    <el-dialog
      :title="formTitle"
      :visible.sync="formVisible"
      :before-close="handleClose"
      v-DragWindow
      width="70%"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="名称" prop="simplename">
              <el-input v-model="form.simplename" minlength="1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="全称" prop="fullname">
              <el-input v-model="form.fullname" minlength="1"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="排序" prop="num">
              <el-input type="number" v-model="form.num"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="父部门">
              <treeselect
                v-model="form.pid"
                :options="deptTree.data"
                placeholder="请选择所属部门"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="save">提交</el-button>
          <el-button @click.native="formVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import TreeTable from "@/components/TreeTable";
import { list, save, del } from "@/api/system_dept";
export default {
  name: "DepartmentManagement",
  components: { TreeTable },
  data() {
    return {
      expandAll: true,
      data: [],
      formVisible: false,
      formTitle: "",
      isAdd: false,
      deptTree: {
        data: []
      },
      form: {
        id: "",
        simplename: "",
        fullname: "",
        pid: undefined,
        num: ""
      },
      rules: {
        simplename: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }
        ],
        fullname: [
          { required: true, message: "请输入编码", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ],
        num: [{ required: true, message: "请输入排序", trigger: "blur" }]
      }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      list().then(response => {
        this.data = response.data;
        this.deptTree.data = response.data;
        this.listLoading = false;
      });
    },
    checkSel() {
      if (this.selRow && this.selRow.id) {
        return true;
      }
      this.$message({
        message: "请选中操作项",
        type: "warning"
      });
      return false;
    },
    add() {
      this.form = {};
      this.formTitle = "添加菜单";
      this.formVisible = true;
      this.isAdd = true;
    },
    save() {
      var self = this;
      this.$refs["form"].validate(valid => {
        if (valid) {
          console.log("form", self.form);
          const menuData = {
            id: self.form.id,
            simplename: self.form.simplename,
            fullname: self.form.fullname,
            num: self.form.num,
            pid: self.form.pid
          }; // self.form
          menuData.parent = null;
          save(menuData).then(response => {
            console.log(response);
            this.$message({
              message: "提交成功",
              type: "success"
            });
            self.fetchData();
            self.formVisible = false;
          });
        } else {
          return false;
        }
      });
    },
    editItem(record) {
      this.selRow = Object.assign({}, record);
      if (this.selRow.pid === "0") {
        this.selRow.pid = undefined;
      }
      this.edit();
    },
    edit() {
      if (this.checkSel()) {
        this.isAdd = false;
        this.form = Object.assign({}, this.selRow);
        this.form.statusBool = this.form.statusName === "启用";
        this.form.password = "";
        this.formTitle = "修改用户";
        this.formVisible = true;
      }
    },
    removeItem(record) {
      this.selRow = record;
      this.remove();
    },
    remove() {
      if (this.checkSel()) {
        this.$confirm("确定删除该记录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          const row = this.selRow;
          del(row.id).then(response => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.fetchData();
          });
        });
      }
    },
    // 弹窗关闭提示
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>
